<template>
    <div class="w-full h-full flex flex-col">
        <div class="w-full  flex flex-col">
            <el-page-header @back="action_go_back" :content="$route.query.name">
            </el-page-header>
            <el-divider class=" mb-w10"></el-divider>
        </div>
        <div class="w-full flex flex-row">
            <div class=" h-full border rounded-sm flex flex-col" style="width:49%">
                <div class="w-full flex flex-row justify-between p-w10">
                    <div class="flex flex-row   w-w2/5">
                        <el-input placeholder="请输入规则名称" clearable prefix-icon="el-icon-search" v-model="s_rule.key_rule"
                            @clear="action_list_rule">
                        </el-input>
                        <el-button type="primary" class=" bg-cmain_hover ml-w10" @click="action_list_rule">搜索
                        </el-button>
                    </div>
                    <el-button type="primary" class=" bg-cmain_hover ml-w10" icon="el-icon-plus"
                        @click="dialog_add_rule = true">添加规则</el-button>
                </div>
                <div class=" w-full h-w680 px-w20    flex flex-col" id="questionList">
                    <el-table :data="s_rule.list_rule" stripe style="width: 100%;height: 100%; "
                        @row-click="action_rule_table_item_click" class="overflow-y-auto">
                        <el-table-column prop="name" label="规则名称" min-width="15%">
                        </el-table-column>
                        <el-table-column label="计算模式" min-width="15%">
                            <template slot-scope="scope">
                                <span>{{ scope.row.compute_mode_str }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="base" label="基数值" min-width="10%">
                        </el-table-column>
                        <el-table-column label="结果模式" min-width="15%">
                            <template slot-scope="scope">
                                <span>{{ scope.row.result_type_str }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="percentage_base" label="百分比基数" min-width="10%">
                        </el-table-column>
                        <el-table-column label="操作" min-width="10%">
                            <template slot-scope="scope">
                                <el-button @click="action_edit_rule(scope.row)" size="small" icon="el-icon-edit" circle>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div style="width:2%"></div>
            <div class=" h-full border rounded-sm flex flex-col" style="width:49%">
                <div class="w-full flex flex-row justify-between p-w10 items-center">
                    <div class=" text-f16" v-if="s_rule.m_rule.id">
                        {{ "规则名称：" + s_rule.m_rule.name }}
                    </div>
                    <el-button v-if="s_rule.m_rule.id" type="primary" class=" bg-cmain_hover ml-w10" icon="el-icon-plus"
                        @click="dialog_add_rule_result = true">添加计分结果</el-button>
                </div>
                <div v-if="s_rule.m_rule.id" class=" w-full h-full px-w20  overflow-y-auto flex flex-col"
                    id="questionList">
                    <el-table :data="s_rule.list_result" stripe style="width: 100%;height: 100%; ">
                        <el-table-column prop="min" label="最小分值" min-width="15%">
                        </el-table-column>
                        <el-table-column prop="max" label="最大分值" min-width="15%">
                        </el-table-column>
                        <el-table-column prop="name" label="结果名称" min-width="20%">
                        </el-table-column>
                        <el-table-column label="操作" min-width="10%">
                            <template slot-scope="scope">
                                <el-button @click="action_edit_rule_result(scope.row)" size="small" icon="el-icon-edit"
                                    circle>
                                </el-button>
                                <el-button type="danger" @click="action_del_rule_result(scope.row)" size="small"
                                    icon="el-icon-delete" circle style="background-color:#F56C6C;">
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <UiDialogAddRule :assess="s_rule.assess" :data="s_rule.m_rule" :is_showDialog="dialog_add_rule"
            :rules="s_rule.list_rule" @nydialog_closed="dialog_add_rule = false" @nydialog_submit="action_add_rule">
        </UiDialogAddRule>

        <UiDialogAddRuleResult :data="s_rule.m_result" :is_showDialog="dialog_add_rule_result"
            @nydialog_closed="dialog_add_rule_result = false" @nydialog_submit="action_add_rule_result">
        </UiDialogAddRuleResult>
        <!-- <UiDialogAddAnswer :data="s_question.m_answer" :is_showDialog="dialog_add_answer"
            @nydialog_closed="dialog_add_answer = false" @nydialog_submit="action_add_answer">
        </UiDialogAddAnswer> -->
    </div>
</template>

<script src="./Index.ts"></script>
<style src="./Index.less" lang="less" scoped>
</style>
